<template>
	<view class="container" v-if="details">
		<image class="swiper" :src="details.goods.thumPic"></image>
		<view class="main" :class="server.beginning?'mainPro':''">
			<view class="details">
				<view class="names">
					<text>{{ details.goods.name }}</text>
					<image @tap="toShare" :src="url+'icon-88.png'" mode=""></image>
				</view>
				<view class="introduce">{{ details.goods.description }}</view>
				<view class="price">¥{{ activeItem.price }}起</view>
				<view class="list_img" @tap="isDetails?authentication():''">
					<image v-for="item in areaPic" :src="item" mode="heightFix"></image>
				</view>
			</view>
			<view class="feeForService">
				<view class="title">费用介绍</view>
				<view class="content">
					<view class="table">
						<view class="table_item">
							<text>基础费</text>
							<view>多宠加价</view>
						</view>
						<view class="table_item table_itemTwo" v-if="details.goods.petNumMarkUp.upPrice">
							<text>{{ details.goods.petNumMarkUp.startValue }}只宠物¥{{ activeItem.price }}</text>
							<view class="textTwo">每多{{ details.goods.petNumMarkUp.outValue }}只加 ¥{{ details.goods.petNumMarkUp.upPrice }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="describe" v-if="details.goods.detailRichText">
				<view class="title">服务内容</view>
				<view class="content">
					<mp-html :content="dealHtml(details.goods.detailRichText)" preview-img pause-video></mp-html>
				</view>
			</view>
			<view class="valueAdded" v-if="details?.addServiceList?.length">
				<view class="title">增值服务</view>
				<view class="valueAdded_list">
					<view class="valueAdded_item" v-for="item in details.addServiceList" :key="item.id">
						<view class="valueAdded_item_content">
							<image :src="item.goods.thumPic" mode=""></image>
							<text>{{ item.goods.name }}</text>
						</view>
						<view class="valueAdded_item_price">¥{{ item.goodsSkuList[0].price }}/次</view>
					</view>
				</view>
			</view>
			<view class="describe" v-if="textContent">
				<view class="title">下单须知&常见问题</view>
				<view class="content">
					<mp-html :content="dealHtml(textContent)" preview-img pause-video></mp-html>
				</view>
			</view>
		</view>
		<view class="footer" v-if="server.beginning">
			<view class="fenYong">
				<view>
					<text>服务推广可赚佣金</text>
					<text v-if="userInfo.identity==1">工作室赚：{{activeItem.studioPromotionCommission}}元</text>
					<text>推广员赚：{{activeItem.petsitterPromotionCommission}}元</text>
				</view>
				<view>
					<text>服务接单可赚佣金</text>
					<text v-if="userInfo.identity==1">工作室赚：{{activeItem.studioAcceptanceCommission}}元</text>
					<text>接单员赚：{{activeItem.petsitterAcceptanceCommission}}元</text>
				</view>
			</view>
			<view class="toShare">
				<view class="to" @tap="toStudio"><image :src="url+'icon-140.png'"></image><text>首页</text></view>
				<view class="share" @tap="server.toUserShop">分享赚佣金</view>
			</view>
		</view>
		<view class="btn" v-else>
			<view class="studio" @tap="toStudio">
				<image :src="url + 'icon-140.png'" mode=""></image>
				<text>首页</text>
			</view>
			<view @click="ordeNew" class="submit">立即下单</view>
		</view>
		
		<image @tap="handleContact('400-154-1313')" class="kefu" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-126.png" mode="widthFix"></image>

		<view class="model" v-if="shopModel">
			<view class="model_content">
				<view class="mode_detail">
					<image :src="details.goods.thumPic" mode=""></image>
					<view>
						<view class="model_name">
							<text>{{ details.goods.name }}</text>
							<view class="close" @tap="shopModel = false">
								<uni-icons type="closeempty" :color="'#1B2120'" :size="16"></uni-icons>
							</view>
						</view>
						<view class="model_introduce">{{ details.goods.description }}</view>
						<view class="model_price">¥{{ activeItem.price }}起</view>
					</view>
				</view>
				<view class="serverTime">
					<view class="title">
						请选择服务规格：
						<text>{{ activeItem.serviceTime }}</text>
					</view>
					<view class="selectTime">
						<view
							:class="[activeItem.id == item.id ? 'active' : '', index > 2 ? 'nth3' : '']"
							v-for="(item, index) in details.goodsSkuList"
							:key="item.id"
							@click="change(item)">
							{{ item.serviceTime }}
						</view>
					</view>
				</view>
				<view class="model_btns">
					<view @tap="tosub">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import api from "@/api";
import { reactive, ref } from "vue";
import { getLocation } from "@/hooks/useFunction";
import { onLoad, onShareAppMessage, onHide, onShow, onShareTimeline } from "@dcloudio/uni-app";
import { useUserStoreToRefs } from "@/store/useUserStore";
const { shareRefereeId, userInfo } = useUserStoreToRefs();
import { accredit } from "@/hooks/useAppPermission/index";
import { dealHtml } from '@/hooks/useFunction'
const url = ref<string>("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/");
const studioGoodsId = ref<string>("");

// 联系客服
const handleContact = async (item) => {
	// #ifdef APP
	const status = await accredit("CALL_PHONE");
	if (status != 1) return;
	// #endif
	uni
		.showModal({
			title: "提示",
			content: "客服上班时间：周一到周六 09:30~18:30",
			confirmText: "确定呼叫"
		})
		.then((e) => {
			console.log(e);
			if (e.confirm) {
				uni.makePhoneCall({
					phoneNumber: item
				});
			}
		});
};

import configs from "@/config";
onShareAppMessage(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ""}&text=wx&data1=${studioGoodsId.value}&type=5`;
	return {
		title: "",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: ""
	};
});
onShareTimeline(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ""}&text=wx&data1=${studioGoodsId.value}&type=5`;
	return {
		title: "",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: ""
	};
});

onLoad(async (e) => {
	studioGoodsId.value = e.studioGoodsId;
	userId.value = e.userId;
	studioId.value = e.studioId;
});
onShow(async () => {
	server.beginning = configs.beginning == 'user'?false:true 
	await getDetails();
	await homePageConfigList();
});
onHide(() => {
	textContent.value = "";
	details.value.goods.detailRichText = "";
	shopModel.value = false;
});

interface item {
	price: string;
	serviceTime: string;
	id: string;
}

const details = ref();
const activeItem = ref<any>();
const userId = ref(0);
const studioId = ref();
const ipConfig = ref({ longitudes: "", latitudes: "" }); //当前经纬度

//佣金
const server = reactive({
	beginning:false,//false  用户端  true 服务端
	toUserShop:()=>{
		uni.showModal({
			title: '温馨提示',
			content: '下单请前往用户端下单',
			confirmText:'前往用户端',
			showCancel:false,
			success: async (res) => {
				uni.navigateTo({
				    url:'/pages/shopping/userorDeringGuide/index'
				})	 
			}
		});
	}
})

// 获取详情
const getDetails = async () => {
	const res1: any = await getLocation();
	if (res1) {
		ipConfig.value.longitudes = res1.longitude;
		ipConfig.value.latitudes = res1.latitude;
	}
	const res: any = await api({
		method: "get",
		url: `/mall/goods/studio-goods/info/v2?id=${studioGoodsId.value}&studioId=${studioId.value}`,
		data: {
			longitudes: ipConfig.value.longitudes,
			latitudes: ipConfig.value.latitudes
		}
	});
	if (res.code != 1) {
		details.value = res.data;
		activeItem.value = res.data.goodsSkuList[0];
		details.value.goods.petNumMarkUp = res.data.goods.petNumMarkUp ? JSON.parse(res.data.goods.petNumMarkUp) : "";
		details.value.goods.petRangeMarkUp = res.data.goods.petRangeMarkUp ? JSON.parse(res.data.goods.petRangeMarkUp) : "";
	} else {
		uni.showToast({
			title: res.msg,
			icon: "none"
		});
		setTimeout(() => {
			uni.navigateBack();
		}, 1000);
	}
};
//获取工作室配置
const areaPic = ref([]);
const textContent = ref("");
const isDetails = ref(0)
const homePageConfigList = async () => {
	const res: any = await api({
		method: "get",
		url: `/mall/content/home-page-config/list`
	});
	let arr = res.data.filter((item) => item.type == 6);
	areaPic.value = arr[0].areaPic.split(",");
	isDetails.value = arr[0].isDetails
	const res1: any = await api({
		method: "get",
		url: `/mall/content/backend-configs/getServiceConfig`
	});
	let problem = res1.data["xjs.service.details.page.common.problem"];
	let notice = res1.data["xjs.service.details.page.order.notice"];
	textContent.value = problem += notice;
};
//跳转认证页面
const authentication = () => {
	uni.navigateTo({
		url: "/pages/studio/certificationDetails/index?score=6"
	});
};

const change = (item) => {
	if (activeItem.value.id == item.id) return;
	activeItem.value = item;
};
//跳转在线咨询
const onlineConsultation = () => {
	uni.navigateTo({
		url: `/pages/im/message/index?id=${details.value.studio.userId}&username=${details.value.studio.nickName}&avatar=${details.value.studio.avatar}`
	});
};
//跳转工作室详情
const toStudio = () => {
	uni.navigateTo({
		url: "/pages/studio/index/index?id=" + details.value.studio.id
	});
};

//点击下单
const shopModel = ref<Boolean>(false);
const ordeNew = async () => {
	if (!userInfo.value) {
		uni.showToast({
			icon: "none",
			title: "登录后即可预约下单"
		});
	} else {
		shopModel.value = true;
	}
};

const tosub = async () => {
	const res: any = await api({
		method: "get",
		url: `/mall/goods/studio-goods/info/v2`,
		data: {
			longitudes: ipConfig.value.longitudes,
			latitudes: ipConfig.value.latitudes,
			studioId: studioId.value,
			id: studioGoodsId.value
		}
	});
	if (res) {
		if (res.code == 0) {
			uni.navigateTo({
				url: `/pages/payment/order/index?studioGoodsId=${studioGoodsId.value}&skuId=${activeItem.value.id}&studioId=${studioId.value}&waiterId=${userId.value}`
			});
		} else {
			uni.showToast({
				icon: "none",
				title: "抱歉，该服务已下架"
			});
		}
	}
};

const toShare = () =>{
	uni.navigateTo({
		url: `/pages/share/workCode/index?type=5&id=${studioGoodsId.value}&studioId=${studioId.value}`
	})
}

</script>

<style lang="scss" scoped>
.container {
	line-height: 1;
	min-height: 100vh;
	background-color: #fff;

	.main {
		height: calc(100% - 750rpx);
		// padding: 0 40rpx 38rpx;
		box-sizing: border-box;
		padding-bottom: calc(var(--safe-area-bottom) + 176rpx);
        
		.names {
			width: 100%;
			color: #1a1a1a;
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 16rpx;

			@include flex(center, space-between);

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.introduce {
			color: #7c807f;
			font-size: 30rpx;
			line-height: 42rpx;
			margin-bottom: 40rpx;
		}

		.details {
			padding: 40rpx 40rpx 64rpx;
			box-sizing: border-box;
			// border-bottom: 2rpx solid #E6E6E6;
			.list_img {
				@include flex(center);

				image {
					height: 34rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
    .mainPro{
		padding-bottom: calc(var(--safe-area-bottom) + 176rpx + 218rpx);
	}
	.swiper {
		width: 750rpx;
		height: 750rpx;
	}

	.price {
		width: 100%;
		color: #1a1a1a;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 48rpx;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding: 8rpx 40rpx;
		border-top: 1rpx solid #e4e6e6;
		padding-bottom: calc(var(--safe-area-bottom) + 8rpx);
		box-sizing: border-box;
		background-color: #ffffff;
		@include flex(center, space-between);

		.studio {
			color: #5c5e5e;
			font-size: 24rpx;
			@include flex(center);
			flex-direction: column;

			image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 16rpx;
				margin-bottom: 8rpx;
			}
		}

		.submit {
			width: 576rpx;
			height: 88rpx;
			box-sizing: border-box;
			border: 2rpx solid #ff6084;
			@include flex(center, center);
			color: #ffffff;
			font-size: 28rpx;
			border-radius: 62rpx;
			background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
		}

		.removeFromTheShelf {
			color: #1b2120;
			font-size: 28rpx;
			background: #e4e6e6;
			border: 2rpx solid #e4e6e6;
		}
	}

	.end {
		justify-content: flex-end;
	}

	.feeForService {
		padding: 64rpx 40rpx;
		box-sizing: border-box;
		border-top: 2rpx solid #e4e6e6;

		.title {
			color: #1a1a1a;
			font-size: 36rpx;
			font-weight: bold;
		}

		.table {
			margin-top: 24rpx;
			border-radius: 8rpx;
			border: 2rpx solid #e4e6e6;

			.table_item {
				box-sizing: border-box;
				@include flex(center);
				color: #7c807f;
				font-size: 32rpx;

				text {
					width: 50%;
					height: 96rpx;
					box-sizing: border-box;
					@include flex(center, center);
					border-right: 2rpx solid #e4e6e6;
				}

				view {
					height: 96rpx;
					width: 50%;
					box-sizing: border-box;
					@include flex(center, center);
				}
			}

			.table_itemTwo {
				border-top: 2rpx solid #e4e6e6;

				> text {
					color: #1b2120;
					font-weight: bold;
				}

				view {
					color: #1b2120;
					font-weight: bold;
				}
			}
		}

		.tableTwo {
			.table_item .textTwo {
				width: calc(50% - 58rpx);
				box-sizing: border-box;
				border-right: 2rpx solid #e4e6e6;

				&:last-child {
					border-right: none;
				}
			}
		}
	}
}

.describe {
	padding: 64rpx 40rpx;
	box-sizing: border-box;
	border-top: 2rpx solid #e4e6e6;

	.title {
		color: #1a1a1a;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	}
}

.valueAdded {
	padding: 64rpx 40rpx;
	box-sizing: border-box;
	border-top: 2rpx solid #e4e6e6;

	.title {
		color: #1a1a1a;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	}

	.valueAdded_item {
		font-size: 30rpx;
		color: #1b2120;
		padding: 24rpx 32rpx;
		background: #f9f6f6;
		box-sizing: border-box;
		border-radius: 12rpx;
		margin-bottom: 24rpx;

		&:last-child {
			margin: 0;
		}

		@include flex(center, space-between);

		image {
			width: 32px;
			height: 32px;
			margin-right: 16rpx;
			border-radius: 12rpx;
		}

		.valueAdded_item_content {
			@include flex(center);
		}

		.valueAdded_item_price {
			color: #1b2120;
		}
	}
}

.kefu {
	width: 68px;
	height: 68px;
	// box-shadow: 0px 0px 16rpx 0px rgba(147,107,108,0.12);
	// border-radius: 50%;
	bottom: calc(var(--safe-area-bottom) + 350rpx);
}
.footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding-bottom: calc(var(--safe-area-bottom) + 8rpx);
	box-sizing: border-box;
	background-color: #ffffff;
	@include flex(center, space-between);
	flex-direction: column;
	.fenYong{
		width: 100%;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		@include flex(center,space-between);
		view{
			width: 340rpx;
			height: 170rpx;
			color: #5C5E5E;
			font-size: 24rpx;
			background: #FFE6EC;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			padding:24rpx 0 0 32rpx;
			box-sizing: border-box;
			text{
				&:first-child{
					margin-bottom: 32rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #1B2120;
				}
				&:last-child{
					margin-top: 16rpx;
				}
			}
			&:last-child{
				background: #F1EEFF;
			}
		}
	}
	.toShare{
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		@include flex(center,space-between);
		border-top: 1rpx solid #E4E6E6;
		.to{
			font-size: 24rpx;
			color: #1A1A1A;
			@include flex(center,center);
			flex-direction: column;
			margin-right: 40rpx;
			&:last-child{margin: 0;}
			image{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 16rpx;
			}
		}
		.share{
			color: #FFFFFF;
			width: 576rpx;
			height: 88rpx;
			font-size: 28rpx;
			border-radius: 62rpx;
			@include flex(center,center);
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		}
	}
}
.model {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999 !important;
	background: rgba(0, 0, 0, 0.4);

	.model_content {
		width: 100%;
		padding: 64rpx 40rpx;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: calc(var(--safe-area-bottom) + 110rpx);
	}

	.mode_detail {
		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 24rpx;
		}

		@include flex(flex-start, space-between);

		> view {
			width: calc(100% - 224rpx);

			.model_name {
				font-weight: bold;
				font-size: 36rpx;
				color: #1b2120;
				margin-bottom: 24rpx;
				@include flex(center, space-between);
			}

			.model_introduce {
				font-size: 24rpx;
				color: #808080;
				line-height: 40rpx;
				margin-bottom: 24rpx;
			}

			.model_price {
				font-weight: 500;
				font-size: 30rpx;
				color: #1b2120;
			}
		}
	}

	.serverTime {
		margin: 64rpx 0;

		.title {
			color: #1a1a1a;
			font-size: 26rpx;
			margin-bottom: 32rpx;

			text {
				color: #ff6084;
			}
		}

		.selectTime {
			width: 100%;
			@include flex(center);
			flex-wrap: wrap;

			view {
				width: 212rpx;
				height: 70rpx;
				color: #808080;
				font-size: 30rpx;
				margin: 0 16rpx 16rpx 0;
				border-radius: 8rpx;
				box-sizing: border-box;
				border: 2rpx solid #808080;
				@include flex(center, center);

				&:nth-child(3n) {
					margin-right: 0;
				}
			}

			.nth3 {
				margin-top: 16rpx;
			}

			.active {
				color: #ff6084;
				border: 2rpx solid #ff6084;
			}
		}
	}

	.model_btns {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding: 8rpx 24rpx;
		border-top: 1rpx solid #e4e6e6;
		padding-bottom: calc(var(--safe-area-bottom) + 4rpx);
		box-sizing: border-box;
		background-color: #ffffff;
		@include flex(center);

		view {
			width: 100%;
			height: 88rpx;
			color: #ffffff;
			font-size: 28rpx;
			background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
			border-radius: 44rpx;
			box-sizing: border-box;
			@include flex(center, center);
		}
	}
}
</style>
